<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/WEB-INF/views/includes/taglibs.jsp"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="nice" />
<meta name="description" content="nice web" />
<title>NICE WEB</title>

	
	<style>
		label, input { display:block; }
		input.text { margin-bottom:8px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:15px; }
		.ui-dialog .ui-state-error { padding: .3em; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }		
	</style>
	
		
	
	<script language="JavaScript" type="text/javascript">
$(function(){

	// Accordion
	$("#accordion").accordion({ header: "h3" });

	// Tabs
	$('#tabs').tabs();


	// create user
	$( "#dialog:ui-dialog" ).dialog( "destroy" );
	
	var name = $( "#name" ),
		email = $( "#email" ),
		password = $( "#password" ),
		allFields = $( [] ).add( name ).add( email ).add( password ),
		tips = $( ".validateTips" );

	function updateTips( t ) {
		tips
			.text( t )
			.addClass( "ui-state-highlight" );
		setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		}, 500 );
	}

	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( "Length of " + n + " must be between " +
				min + " and " + max + "." );
			return false;
		} else {
			return true;
		}
	}

	function checkRegexp( o, regexp, n ) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {
			return true;
		}
	}


	$( "#create-user" ).button()
	.click(function() {
		$( "#dialog-form" ).dialog( "open" );
	});

	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 300,
		width: 350,
		modal: true,
		buttons: {
			"Create an user": function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );

				bValid = bValid && checkLength( name, "username", 3, 16 );
				bValid = bValid && checkLength( email, "email", 6, 80 );
				bValid = bValid && checkLength( password, "password", 5, 16 );

				bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
				// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
				bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
				bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

				if ( bValid ) {
					$( "#users tbody" ).append( "<tr>" +
						"<td>" + name.val() + "</td>" + 
						"<td>" + email.val() + "</td>" + 
						"<td>" + password.val() + "</td>" +
					"</tr>" ); 
					
					
					$("#insertUserForm").submit();

					$( this ).dialog( "close" );
				}
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});


});

</script>
</head>
<body>

<!-- Begin Frameless Nav Bar-->
<div class="layout-navbar-region">

</div>
<!-- End Frameless Nav Bar-->

<!-- Begin Header region for breadcrumb-->
<div class="layout-breadcrumb-region">
	<!-- Begin Breadcrumb-->
	<div class="breadcrumb">
		<ul>
			<li class="bold"><a href="#" tabindex="101">Nice</a><span class="caret">&gt;</span></li>
			<li><a href="#" tabindex="102">User Management</a><span class="caret">&gt;</span></li>
			<li><a href="#" tabindex="103">Some Others</a><span class="caret">&gt;</span></li>
		</ul>
	</div>
	<!-- End Breadcrumb-->

<div class="layout-spacer-01"></div>

</div>
<!-- End Header region for breadcrumb -->

<!-- Begin Page Body region -->
<div class="layout-body-region">
<table>
	<tr>
		<td class="layout-body-left-gutter">
		</td>
		<td class="layout-body-toc">
		
			<!-- Accordion -->
			
			<div id="accordion">
				<div>
					<h3><a href="#">User</a></h3>
					<div>
						<ul>
							<li>action 1<li/>
							<li>action 2<li/>
						<ul/>
					</div>
				</div>
				<div>
					<h3><a href="#">product</a></h3>
					<div>
						<ul>
							<li>action 1<li/>
							<li>action 2<li/>
						<ul/>
					</div>
				</div>
				<div>
					<h3><a href="#">other</a></h3>
					<div>
						<ul>
							<li>action 1<li/>
							<li>action 2<li/>
						<ul/>
					</div>
				</div>
			</div>
		
		</td>
		<td class="layout-body-toc-right-gutter">
		</td>
		<td class="layout-body-content">
			<!-- Begin header -->
			<div class="header">
				<h1>User Management</h1>
			</div>
			<!-- End header -->
	
			<div class="layout-spacer-01"></div>
			
			<!-- Tabs -->
			
			<div id="tabs">
				<ul>
					<li><a href="#tabs-1">group 1</a></li>
					
				</ul>
				<div id="tabs-1">
					 <c:choose>
				        <c:when test="${userList != null}"> 
				        id + firstName + lastName + birthday
				        <hr/>
				        	<c:forEach var="user" items="${userList}">
								<p>
									  ${user.userId} + ${user.firstName} + ${user.lastName} + <fmt:formatDate pattern="yyyy/MM/dd" value="${user.birthday}"/> 
								</p>
							</c:forEach>
				        </c:when>
				       </c:choose>
				</div>
			</div>
	
			<div class="footnote">
				<p><strong>Important Information</strong></p>
				<p class="clear-bottom"><strong>some thing</strong></p>
			</div>
			
			<div id="dialog-form" title="Create new user">
				<p class="validateTips">All form fields are required.</p>
			
				<form id="insertUserForm" action="insertUser2" method="post">
				<fieldset>
					<label for="name">first name</label>
					<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
					<label for="email">email</label>
					<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
					<label for="password">Password</label>
					<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
				</fieldset>
				</form>
			</div>
			
			<c:choose>
				<c:when test="${userList != null}"> 
					<div id="users-contain" class="ui-widget">
						<h1>Existing Users:</h1>
						<table id="users" class="ui-widget ui-widget-content">
							<thead>
								<tr class="ui-widget-header ">
									<th>id</th>
									<th>firstName</th>
									<th>birthday</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach var="user" items="${userList}">
								<tr>
									<td>${user.userId}</td>
									<td>${user.firstName}</td>
									<td><fmt:formatDate pattern="yyyy/MM/dd" value="${user.birthday}"/></td>
								</tr>
								</c:forEach>
							</tbody>
						</table>
					</div>
				</c:when>
			</c:choose>
				
			
			<button id="create-user">Create new user</button>
						
	
	
	
			</td>
			<td class="layout-body-gutter-right">
			</td>
			<td class="layout-body-gutter-right-border">
			</td>
			<td class="layout-body-right">
	
				<div class="layout-spacer-01"></div>
	
				<!-- Begin xx component --> 
				<p>some other links</p>
				<!-- End xx component -->

		</td>
		<td class="layout-body-far-right-gutter">
		
		</td>
	</tr>
</table>

</div>
<!-- End Page Body region -->

<!-- Begin Footer region -->
<div class="layout-footer-region">
<div class="layout-spacer-01"></div>

	<div class="primary-footer">
	<img class="nice-logo" src="images/nb_footer_logo.gif" alt="Nice."  title="Nice." border="0" />
		<p class="copyright">&copy; 2010 &ndash; 2011 Nice</p>
		<p class="rights">All rights reserved.</p>
			<ul>
				<li class="first"><a href="#" title="Terms of Use">Terms of Use</a></li>
				<li><a href="#" title="Privacy">Privacy</a></li>
				<li><a href="#" title="Security">Security</a></li>
			</ul>
	</div>

</div>
<!-- End Footer region -->



</body>
</html>